<template>
  <div class="x-app-comment">
    <div class="x-app-comment-header flex-b-c">
      <div class="x-app-comment-header-user">
        <img :src="data.userPic" v-if="data.userPic">
        <img src="@/assets/images/default_head_img.png" v-else>
        <div class="flex-col flex-c-l">
          <span>{{ data.userName }}</span>
          <span>{{ data.commentsCreateTime }}</span>
        </div>
      </div>
      <x-svg-icon name="delete" class="x-app-comment-delete" @click="deleteComments(data.commentsId)" v-if="showDelete" />
    </div>
    <div class="x-app-comment-content">
      {{ data.comments }}
    </div>
    <div class="x-app-comment-course" v-if="showCourse">
      <x-app-course :data="data"></x-app-course>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppComment',
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    },
    index: {
      type: Number,
      default: 0
    },
    showCourse: {
      type: Boolean,
      default: false
    },
    showDelete: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    };
  },
  methods: {
    async deleteComments (commentsId) {
      const res = await this.$dialog.confirm({ message: '确认删除此条评论吗？' }).catch( err => false );
      if (!res) return
      await this.Request.deleteComments({ params: { commentsId } })
      this.$emit('delete', this.index);
      this.$toast('删除成功！');
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
.x-app-comment {
  background-color: $white1;
  padding: 20px 16px;
  .x-app-comment-header {
    .x-app-comment-header-user {
      display: flex;
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
      div {
        margin-left: 18px;
        span {
          display: block;
          padding: 4px 0;
        }
        span:nth-child(1) {
          font-size: 16px;
          color: $white5;
        }
        span:nth-child(2) {
          font-size: 0.0933rem;
          color: $white4;
        }
      }
    }
    .x-app-comment-delete {
      font-size: 24px;
      color: $red1;
    }
  }
  .x-app-comment-content {
    font-size: 0.0933rem;
    color: $white5;
    line-height: 20px;
    margin: 15px 0;
  }
  .x-app-comment-course {
    background: $white6;
    padding: 6px 16px;
    border-radius: 10px;
  }
}
</style>
